<template>
  <div>
    <div class="searchResult">
      <ul>
        <li class="resultItem">
          <a class="itemWrapper">
            <div class="itemWrapper-left">
              <img
                :src="item.trackInfo.cover_path"
              />
              <van-icon name="play" class="autoPlay" />
            </div>
            <div class="itemWrapper-right">
              <div class="itemWrapper-right-top">
                {{ item.trackInfo.title }}
              </div>
              <div class="itemWrapper-right-bottom">
                <div class="bottom-item">
                  <van-icon name="manager" />
                  <span>{{ item.trackInfo.nickname }}</span>
                </div>
                <div class="bottom-item">
                  <van-icon name="underway-o" />
                  <span>{{ moment(item.trackInfo.updated_at).format('hh:mm')  }}</span>
                </div>
                <div class="bottom-item">
                  <van-icon name="play-circle-o" />
                  <span>{{ item.trackInfo.count_play
 }}</span>
                </div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import {tracksItem} from '../../../api/serach/type'
import moment from 'moment'
defineProps<{
  item:tracksItem
}>();





</script>

<style lang="less" scoped>
.searchResult {
  margin-left: 15px;
  .resultItem {
    width: 100%;
    height: 80px;
    .itemWrapper {
      padding: 15px 0;
      border-bottom: 1px solid #ccc;
      display: flex;
      .itemWrapper-left {
        flex-shrink: 0;
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        .autoPlay {
          position: absolute;
          top: 10px;
          left: 10px;
          font-size: 28px;
          color: white;
        }
        img {
          width: 100%;
          height: 100%;
        }
        &::after {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          background: rgba(0, 0, 0, 0.3);
          text-align: center;
        }
      }
      .itemWrapper-right {
        margin-left: 10px;
        font-size: 16px;
        line-height: 22px;
        color: rgb(64, 64, 76);
       
        .itemWrapper-right-top{
          margin-bottom: 5px;
          display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
        }
        .itemWrapper-right-bottom{
          display: flex;
          margin-right: 15px;
          font-size: 12px;
          color: #999;
          .bottom-item{
            margin-right: 15px;
          }
        }
      }
    }
  }
}
</style>
